<template>
  <div class="swiper-container swiper">
    <div class="swiper-wrapper">
      <div class="swiper-slide" v-for="(item,index) in imgsData" :key="index" @click="showDetail(item)">
        <img :src="item.url" alt="">
      </div>
    </div>

    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>

  </div>
</template>
<script>
export default {
  props: ["imgData"],
  components: {},
  name: "",
  data() {
    return {
      img: {
        default: require("../../assets/img/car.jpg")
      },
      imgsData: [],
      mySwiper: null
    };
  },
  computed: {
    // getImgData(){
    //   return this.imgData||[this.img.default,this.img.default,this.img.default]
    // }
  },
  methods: {
    showDetail(item) {
      this.$router.push("/discount/detail/" + item.id);
    },
    getSwiperData() {
      if (this.settime) clearInterval(this.settime);
      this.settime = setInterval(() => {
        if (sessionStorage.getItem("userId")) {
          clearInterval(this.settime)
          _g.apiPost("activity/pageSlideshow.do")
            .then(res => {
              var goal = [];
              res.data.forEach(ele => {
                goal.push({
                  url: ele.picture,
                  id: ele.id
                });
              });
              this.$set(this, "imgsData", goal);
            })
            .then(() => {
              this.mySwiper = new Swiper(".swiper-container", {
                autoplay: {
                  delay: 3000
                },
                loop: true,
                pagination: {
                  el: ".swiper-pagination"
                }
              });
            });
        }
      }, 30);
    }
  },
  created() {},
  mounted() {
    this.$nextTick(() => {
      this.getSwiperData();
    });
  },
  beforeDestroy() {
    this.mySwiper = null;
    clearInterval(this.settime)
  }
};
</script>
<style lang="scss" scoped>
.swiper-container {
  height: 150px;
}
.swiper-slide {
  img {
    width: 100%;
    height: 100%;
  }
}
</style>